<template>
  <div>
    <a-row :gutter="16" type="flex" justify="center">
      <a-col :span="5" v-for="hero in heroList" :key="hero.id">
      <img
        referrerPolicy='no-referrer'
        width="100"
        :src="imgUrl(hero.index_img)"
      />
        <p>{{hero.name_loc}}</p>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { computed, onMounted, ref } from 'vue';
import api from '../../api';

const heroList = ref()
const imgUrl = computed(()=>{
  return function(url: any){
    const img = url!.replace('https://img.dota2.com.cn/dota2static','/heroimg')
    return img
  }
})

onMounted(() => {
  api.wiki.heroList().then((res:any) => {
    
    if (res.status!=='success') {
      message.error('获取失败')
      return
    }
    heroList.value=res.result.heroes

  })
})
</script>